<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>概况信息</el-breadcrumb-item>
    </el-breadcrumb>

    <div id="info">
      <ul>
        <li>
          <p style="color: #2679f4">
            <countTo
              :startVal="startVal"
              :endVal="currentMonthOrderCount"
              :duration="5000"
            ></countTo>
            <i>单</i>
          </p>
          <el-tooltip
            class="item"
            effect="dark"
            content="本月所有进行中的订单数量"
            placement="bottom"
          >
            <div>月订单数</div>
          </el-tooltip>
        </li>
        <li>
          <p style="color: #19aa5e">
            <countTo
              :startVal="startVal"
              :endVal="currentMonthAffiliatedDisabilityCount"
              :duration="5000"
            ></countTo
            ><i>人</i>
          </p>
          <el-tooltip
            class="item"
            effect="dark"
            content="本月所有挂靠残疾人数量"
            placement="bottom"
          >
            <div>月挂靠数</div>
          </el-tooltip>
        </li>
        <li>
          <p style="color: #6887ff">
            <countTo
              :startVal="startVal"
              :endVal="currentYearAffiliatedMonthCount"
              :duration="5000"
            ></countTo
            ><i>月</i>
          </p>
          <el-tooltip
            class="item"
            effect="dark"
            content="本年所有挂靠的残疾人月数"
            placement="bottom"
          >
            <div>年挂靠月数</div>
          </el-tooltip>
        </li>
        <li>
          <p style="color: #ffab00">
            <countTo
              :startVal="startVal"
              :endVal="currentMonthOrderProfits"
              :duration="5000"
            ></countTo
            ><i>元</i>
          </p>
          <el-tooltip
            class="item"
            effect="dark"
            content="本月所有进行中订单的订单利润总和"
            placement="bottom"
          >
            <div>月收入</div>
          </el-tooltip>
        </li>
        <li>
          <p style="color: #ffdd00">
            <countTo
              :startVal="startVal"
              :endVal="currentYearOrderCount"
              :duration="5000"
            ></countTo
            ><i>元</i>
          </p>
          <el-tooltip
            class="item"
            effect="dark"
            content="本年所有订单的订单利润总和"
            placement="bottom"
          >
            <div>年收入</div>
          </el-tooltip>
        </li>
      </ul>
    </div>

    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
      <el-table-column sortable prop="messageId" label="消息ID" width="">
      </el-table-column>
      <el-table-column
        sortable
        prop="messageContent"
        label="残疾人姓名"
      >
      </el-table-column>
      <el-table-column sortable prop="messageTypeTxt" label="消息类型" width="">
      </el-table-column>
      <el-table-column sortable prop="isRead" label="是否已读" width="">
        <template slot-scope="scope">
          <!-- <span>
            {{scope.row.isRead == 1 ? "未读":"已读"}}
          </span> -->
          <span v-show="scope.row.isRead == 1" style="color:#ff4747;">未读</span>
          <span v-show="scope.row.isRead != 1">已读</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" v-show="scope.row.isRead == 1" @click="handleEdit(scope.$index, scope.row)"
            >标记已读</el-button
          >
          <!-- <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
</template>

<script>
import {
  getIndex,
  getIndexInfo,
  IndexInfoReaded
} from "../../api/userMG";
import Pagination from "../../components/Pagination";
import countTo from "vue-count-to";
import { setCookie, getCookie, delCookie } from '../../utils/util'
export default {
  data() {
    return {
      startVal: 0,
      currentMonthOrderCount: 0,
      currentMonthAffiliatedDisabilityCount: 0,
      currentYearAffiliatedMonthCount: 0,
      currentMonthOrderProfits: 0,
      currentYearOrderCount: 0,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      formInline:{
        pageNum:1,
        pageSize:10
      },
      listData: [], 
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
    countTo,
  },
  /**
   * 数据发生改变
   */
  mounted() {
  },
  /**
   * 创建完毕
   */
  created() {
    // if(getCookie('isShowIndex') != 1){
    //   this.$router.push({ path: '/goods/Goods' });
    // }
    this.getNumberInfo();
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取进行中的代理人
    getNumberInfo() {
      getIndex().then(res=>{
        // console.log(res);
        this.currentMonthAffiliatedDisabilityCount = res.data.currentMonthAffiliatedDisabilityCount;
        this.currentMonthOrderCount = res.data.currentMonthOrderCount;
        this.currentMonthOrderProfits = res.data.currentMonthOrderProfits;
        this.currentYearAffiliatedMonthCount = res.data.currentYearAffiliatedMonthCount;
        this.currentYearOrderCount = res.data.currentYearOrderCount;
      })
    },
    // 获取公司列表
    getdata(parameter) {
      getIndexInfo(parameter)
        .then((res) => {
          this.loading = false;
          // console.log(res);
          if (res.status != 200) {
            this.$message({
              type: "info",
              message: res.msg,
            });
          } else {
            this.listData = res.data.list;
            // 分页赋值
            this.pageparm.currentPage = Number(this.formInline.pageNum);
            this.pageparm.pageSize = Number(this.formInline.pageSize);
            this.pageparm.total = Number(res.data.total);
          }
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    
    //显示编辑界面
    handleEdit: function (index, row) {
      // console.log(index, row);
      IndexInfoReaded({
        messageId:row.messageId
      }).then(res=>{
        if(res.status == 200){
          this.getdata(this.formInline);
        }
      })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
#info {
  width: 100%;
  height: 162px;
}
#info ul {
  display: flex;
  justify-content: center;
  align-content: center;
}
#info ul li {
  width: 20%;
  height: 162px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#info ul li p {
  margin-bottom: 18px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
#info ul li p i {
  font-size: 12px;
  color: #333;
  font-style: normal;
  padding-left: 5px;
}
</style>

 
 